<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>2点之间，路程规划，计算时间</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div>
		<select id="select" style="margin-top: 5px; margin-bottom: 5px;">
			<option value ="0"> --选择出行方式-- </option>
			<option value ="1">汽车</option>
			<option value ="2">摩托/自行车</option>
			<option value ="3">公交</option>
			<option value ="4">走路</option>
		</select>
	</div>
	<div>总距离约： <input type="text" id="distance" value="" readonly />&nbsp;公里</div>
	<div>总时间约： <input type="text" id="time" value="" readonly />&nbsp;分钟</div>
	<div id="map"></div>

	<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw" defer></script>
    <script>
    	var map;
    	var center = { lat: 25.034010, lng: 121.562428 };
    	var start = { lat: 25.034010, lng: 121.562428 };
    	var end = { lat: 25.037906, lng: 121.549781 };

    	var travelMode;
    	var array = ['DRIVING', 'BICYCLING', 'TRANSIT', 'WALKING'];
		var time = 0;    // 时间 (秒) 
		var distance = 0;// 距离 (米)

		function initMap(travelMode = 'DRIVING') {
		    // 初始化地圖
		    map = new google.maps.Map(document.getElementById('map'), {
		        zoom: 12,
		        center: center
		    });
		}

		function  routeMap(travelMode){
			// 載入路線服務與路線顯示圖層
		    var directionsService = new google.maps.DirectionsService();
		    var directionsDisplay = new google.maps.DirectionsRenderer();

		    // 放置路線圖層
		    directionsDisplay.setMap(map);

		    // 路線相關設定
		    var request = {
		        origin: start,
		        destination: end,
		        provideRouteAlternatives: true,
		        avoidFerries: false,
		        avoidHighways: false,
		        avoidTolls: false,
		        travelMode: travelMode  // 移動方式，有 DRIVING ( 開車 )、BICYCLING ( 腳踏車 )、TRANSIT ( 大眾運輸 ) 和 WALKING ( 走路 ) 四種模式，預設為 DRIVING。
		    };

		    // 繪製路線
		    directionsService.route(request, function (result, status) {
		        if (status == 'OK') {
		            // 回傳路線上每個步驟的細節
		            var data = result.routes[0].legs[0].steps;
		            // console.log(data);
		            time = 0;
		            distance = 0;

		            for (var i = 0; i < data.length; i++) {
		            	distance += data[i].distance.value;
		            	time += data[i].duration.value;
		            	// console.log(data[i].distance.value, data[i].duration.value);
		            }

		            time = Math.ceil(time/60);  
		            distance =  distance/1000;

		            document.getElementById('distance').value = distance;
		            document.getElementById('time').value = time;

		            directionsDisplay.setDirections(result);
		        } else {
		            alert('失败了！error:'+status);
		        }
		    });
		}

		window.onload = function() {
			initMap();

			$("#select").change(function(){
				var getSelect =  $("#select").val();
				
				if (getSelect > 0) {
					travelMode = array[getSelect-1];

					// 路线
					initMap();
					routeMap(travelMode)
				}
			})
		}
	</script>
</body>
</html>